<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { http } from '@/utils/http';
	import { ref } from "vue"
	const form = ref({
		receiver: "",
		contact: "",
		fullLocation: "",
		provinceCode: "",
		cityCode: "",
		countyCode: "",
		address: "",
		isDefault: 1
	})
	const xgszdq = (e) => {
		console.log(e)
		form.value.fullLocation = e.detail.value.join(" ");
		form.value.provinceCode = e.detail.code[0];
		form.value.cityCode = e.detail.code[1];
		form.value.countyCode = e.detail.code[2];
	}
	const swmrdz=(e)=>{
		console.log(e)
		if(e.detail.value == true){
			form.value.isDefault = 1;

		}else{
			form.value.isDefault = 0;
			
		}
	}
	const bcbsy=async()=>{
		if(!form.value.id){
			const res=await http({
				url:"/member/address",
				method:"post",
				data:form.value
			})
			console.log(res)
			if(res.code = 200){
				 uni.showToast({
				      icon: 'success',
				      title: '新增成功'
				    })
		 uni.navigateBack()
			}
		}else{
			const res=await http({
				url:`/member/address/${form.value.id}`,
				method:"put",
				data:form.value
			})
			console.log(res)
			if(res.code = 200){
				uni.showToast({
				     icon: 'success',
				     title: '修改成功'
				   })
				 uni.navigateBack()
			}
		}
		
	}
	const getinfo=async (e)=>{
		const res=await http({
			url:`/member/address/${e}`,
			method:"get"
		})
		console.log(res)
		form.value=res.result
	}

	onLoad(option => {

		console.log(option)
		if (option.id) {
			getinfo(option.id)
			uni.setNavigationBarTitle({
				title: "修改地址"
			})
		} else {
			uni.setNavigationBarTitle({
				title: "新建地址"
			})
		}
	})
</script>

<template>
	<view class="content">
		<form>
			<view class="form-item">
				<text class="label">收货人</text>
				<input type="text" v-model="form.receiver" placeholder="请输入" class="input">
			</view>
			<view class="form-item">
				<text class="label">手机号码</text>
				<input type="text" placeholder="请输入" v-model="form.contact" class="input">
			</view>
			<view class="form-item">
				<text class="label">所在地区</text>
				<picker mode="region" @change="xgszdq" class="picker" value="">
					<view v-if="form.fullLocation!==''">{{form.fullLocation}}</view>
					<view v-else class="placeholder">请选择</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="label">详细地址</text>
				<input v-model="form.address" type="text" placeholder="请输入" class="input">
			</view>
			<view class="form-item">
				<text class="label">设为默认地址</text>
				<switch class="switch" @change="swmrdz" color="#27ba9b" :checked="true"></switch>
			</view>
		</form>
	</view>
	<button class="button" @click="bcbsy">保存并使用</button>
</template>



<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>